<template>
  <el-drawer
    :title="$t('message.ddxq')"
    :visible.sync="isShow"
    :wrapper-closable="!modalDialog"
    size="1100px"
  >
    <div class="property-title">{{ $t('message.ddxq') }}</div>
    <div class="df_ac">
      <div class="item">
        <span class="key">{{ $t('message.ddbh') }}：</span>
        <span class="value">{{ detail.orderId }}</span>
      </div>
      <div class="item">
        <span class="key">{{ $t('message.ddzt') }}：</span>
        <span class="value">{{ detail.orderStatus }}</span>
        <!-- <span v-else-if="detail.payStatus == 1">{{ $t('message.cswzf') }}</span>
        <span v-else-if="detail.payStatus == 2">{{ $t('message.yqx') }}</span>
        <span v-else-if="detail.payStatus == 3">{{ $t('message.ypay') }}</span>
        <span v-else-if="detail.payStatus == 4">{{ $t('message.tkz') }}</span>
        <span v-else>{{ $t('message.ytk') }}</span> -->
      </div>
      <div class="item">
        <span class="key">{{ $t('message.createTime') }}：</span>
        <span class="value">{{ detail.createTime }}</span>
      </div>
      <div class="item">
        <span class="key">{{ $t('message.paytime') }}：</span>
        <span class="value">{{ detail.payTime }}</span>
      </div>
      <div class="item">
        <span class="key">{{ $t('message.ddly') }}：</span>
        <span class="value">{{ detail.fromType == '01' ? $t('message.xcxd') : $t('message.cgd') }}</span>
      </div>
      <div class="item">
        <span class="key">{{ $t('message.ddje') }}：</span>
        <span class="value">{{ $t('message.rmbfh') }}{{ detail.orderPrice }}</span>
      </div>
      <div v-if="detail.yhMoney" class="item">
        <span class="key">{{ $t('message.yhje') }}：</span>
        <span class="value">{{ $t('message.rmbfh') }}{{ detail.yhMoney }}</span>
      </div>
      <div class="item">
        <span class="key">{{ $t('message.zffs') }}：</span>
        <span class="value">{{ detail.payMethod || '-' }}</span>
      </div>
      <div v-if="detail.refundPrice" class="item">
        <span class="key">{{ $t('message.tkje') }}：</span>
        <span class="value">{{ $t('message.rmbfh') }}{{ detail.refundPrice }}</span>
      </div>
      <div v-if="detail.mixedPayMethod" class="item">
        <span class="key">{{ $t('message.hhzffs') }}：</span>
        <span class="value">{{ detail.mixedPayMethod || '-' }}</span>
      </div>
      <div v-if="detail.mixedPayMoney" class="item">
        <span class="key">{{ $t('message.hhzfje') }}：</span>
        <span class="value">{{ detail.mixedPayMoney || '-' }}</span>
      </div>
      <div v-if="detail.cardPayMoney" class="item">
        <span class="key">{{ $t('message.hhzfhykje') }}：</span>
        <span class="value">{{ detail.cardPayMoney || '-' }}</span>
      </div>
      <div class="item">
        <span class="key">{{ $t('message.czy') }}：</span>
        <span class="value">{{ detail.createUser || '-' }}</span>
      </div>
      <div class="item">
        <span class="key">{{ $t('message.bz') }}：</span>
        <span class="value">{{ detail.remake }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.kpqk') }}</div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.kpzt') }}：</span>
        <span class="value">{{ detail.invoiceStatus }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.kpzt') }}：</span>
        <span class="value">{{ detail.invoiceTime || "-" }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.mjxx') }}</div>
    <div class="df_ac mt20">
      <div>
        <span class="key">{{ $t('message.name') }}：</span>
        <span class="value">{{ detail.memberName || '-' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.lxdh') }}：</span>
        <span class="value">{{ detail.memberPhone || '-' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.hykh') }}：</span>
        <span class="value">{{ detail.memberId || '-' }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.kcxyxx') }}</div>
    <el-table
      :data="detail.orderDetailList"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.kcmc')"
        prop="courseName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.kclx')"
        prop="courseType"
        min-width="120"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.courseType == '1'">{{ $t('message.ttk') }}</span>
          <span v-if="scope.row.courseType == '3'">{{ $t('message.cqk') }}</span>
          <span v-if="scope.row.courseType == '4'">{{ $t('message.sjk') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.kcjgy')"
        prop="coursePrice"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.xyxm')"
        prop="studentName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.csrq')"
        prop="birthday"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.sex')"
        prop="sex"
        min-width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.courseType == '1'">{{ $t('message.nan') }}</span>
          <span v-else-if="scope.row.courseType == '2'">{{ $t('message.nv') }}</span>
          <span v-else>{{ $t('message.bm') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.zjh')"
        prop="cardNum"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.status')"
        prop="payStatus"
        min-width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.payStatus == 0">{{ $t('message.dzf') }}</span>
          <span v-else-if="scope.row.payStatus == 1">{{ $t('message.cswzf') }}</span>
          <span v-else-if="scope.row.payStatus == 2">{{ $t('message.yqx') }}</span>
          <span v-else-if="scope.row.payStatus == 3">{{ $t('message.ypay') }}</span>
          <span v-else-if="scope.row.payStatus == 4">{{ $t('message.tkz') }}</span>
          <span v-else-if="scope.row.payStatus == 5">{{ $t('message.ytk') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        :label="$t('message.tklx')"
        prop="amount"
        min-width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.refundType == '0'">{{ $t('message.thtk') }}</span>
          <span v-if="scope.row.refundType == '1'">{{ $t('message.jtk') }}</span>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="bottom_wrap">
      <div v-if="detail.detailMoneyRespParam" class="line">
        <span>{{ $t('message.ddje') }}</span>
        <span>{{ detail.detailMoneyRespParam.orderPrice || 0 }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
      <template v-if="detail.detailMoneyRespParam">
        <div v-if="detail.detailMoneyRespParam.memberDiscount || detail.detailMoneyRespParam.consumeGeneraMoney" class="line">
          <span v-if="detail.detailMoneyRespParam.memberDiscount">{{ detail.payMethod == $t('message.zxkzf')? $t('message.zxkdk') + '：' : $t('message.hydk') + '：' }}</span>
          <span v-if="detail.detailMoneyRespParam.memberDiscount">-</span>
          <span v-if="detail.detailMoneyRespParam.memberDiscount">{{ detail.detailMoneyRespParam.memberDiscount || 0 }}</span>
          <span v-if="detail.detailMoneyRespParam.memberDiscount">{{ $t('message.yuan') }}</span>
          <span v-if="detail.detailMoneyRespParam.consumeGeneraMoney && detail.detailMoneyRespParam.memberDiscount">（{{ $t('message.bhdj') }}：{{ detail.detailMoneyRespParam.consumeGeneraMoney }}{{ $t('message.yuan') }}）</span>
          <span v-if="detail.detailMoneyRespParam.consumeGeneraMoney && !detail.detailMoneyRespParam.memberDiscount">{{ $t('message.djdk') }}：-{{ detail.detailMoneyRespParam.consumeGeneraMoney }}{{ $t('message.yuan') }}</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.marketingPolicy" class="line">
          <span>{{ $t('message.yxzc') }}：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.marketingPolicy || 0 }}</span>
          <span>{{ $t('message.yuan') }}</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.groupBuyCoupon" class="line">
          <span>{{ $t('message.tgj') }}：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.groupBuyCoupon || 0 }}</span>
          <span>{{ $t('message.yuan') }}</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.discountCoupon" class="line">
          <span>{{ $t('message.yhj') }}：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.discountCoupon || 0 }}</span>
          <span>{{ $t('message.yuan') }}</span>
        </div>
        <div v-if="detail.detailMoneyRespParam.integral" class="line">
          <span>{{ $t('message.jfdk') }}：</span>
          <span>-</span>
          <span>{{ detail.detailMoneyRespParam.integral || 0 }}</span>
          <span>{{ $t('message.yuan') }}</span>
        </div>
      </template>
      <div v-if="detail.detailMoneyRespParam && (detail.detailMoneyRespParam.getPrice || detail.detailMoneyRespParam.getPrice === 0)" class="line secondColor">
        <span>{{ $t('message.sfk') }}：</span>
        <span>{{ detail.detailMoneyRespParam.getPrice }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import store from '@/store'
import { courseOrderDetail } from '@/api'
export default {
  data() {
    return {
      isShow: false,
      detail: {},
      statusMap: {
        '0': this.$t('message.dzf'),
        '1': this.$t('message.cswzf'),
        '2': this.$t('message.qxzf'),
        '3': this.$t('message.zfcg'),
        '4': this.$t('message.tkz'),
        '5': this.$t('message.tkcg')
      },
      modalDialog: store.getters.dialog
    }
  },
  methods: {
    getOrderDetail(row) {
      courseOrderDetail({ param: { orderId: row.orderId }}).then(res => {
        this.detail = { ...row, ...res.record }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
  color: #666666;
  display: inline-block;
}
.value {
  color: #222;
}
  }
}
.bottom_wrap {
  margin-top: 30px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
